{layout name="./base/base_back"}

		<link rel="stylesheet" type="text/css" href="/front/css/personalInfo.css"/>
		<link href="/front/css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
		<!--个人资料开始-->
		<div id="personal-info-box">
			<div id="personal-info">
				{include file="./navleft"}
				<div class="personal-info-right">
					<div class="personal-info-tit">个人资料<span>(※为必填信息)
					{if $list['status']==$b}
					已审核通过，可继续完善其他信息
					{/if}
					</span></div>
					<form action="/userinfo/updateinfoform" method="post" enctype="multipart/form-data">
						<div class="personal-info-form">
							<div class="form-group-input">
								<label for="" class="form-label">账号：</label>
								{$list.mobile}
							</div>
							{if $list.status!=$b}
							<div class="form-group-input">
								<div for="" class="form-label"><span>※</span>姓名：<span id="nameerror" style="color: red;"></span></div>
								<input type="text" name="real_name"  value="{$list.real_name}" placeholder="请输入您的姓名"/>
							</div>
							{else}
							<div class="form-group-input">
								<div for="" class="form-label"><span>※</span>姓名</div>
								{$list.real_name}	
							</div>
							{/if}
							<div class="form-group-input">
								<label for="" class="form-label">昵称：</label>
								<input type="text" name="nickname"  value="{$list.nickname}" placeholder="请输入您的昵称"/>
							</div>
							<div class="form-group-input">
								<label for="" class="form-label">性别：</label>
								{foreach $sex as $k => $v}
								{if $list['sex']==$k}
								<label for="nan" class="form-label-sex">{$v}  <input type="radio"  value="{$k}" name="sex" checked="true" class="form-radio-sex"/></label>
								{else}
								<label for="nan" class="form-label-sex">{$v}  <input type="radio"  value="{$k}" name="sex"  class="form-radio-sex"/></label>
								{/if}
								{/foreach}
							</div>
							<div class="form-group-input">
								<label for="" class="form-label">心愿邮件通知：</label>
								
								{if $list['wh_accpet']==1}
								<label for="nan" class="form-label-sex">接收  <input type="radio"  value="1" name="wh_accpet" checked="true" class="form-radio-sex"/></label>
								<label for="nan" class="form-label-sex">不接收  <input type="radio"  value="0" name="wh_accpet"  class="form-radio-sex"/></label>
								{else}
								<label for="nan" class="form-label-sex">接收  <input type="radio"  value="1" name="wh_accpet"  class="form-radio-sex"/></label>
								<label for="nan" class="form-label-sex">不接收  <input type="radio"  value="0" name="wh_accpet" checked="true" class="form-radio-sex"/></label>
								{/if}
								
							</div>
							<div class="form-group-input">
								<label for="" class="form-label">生日：</label>
								<input type="text" name="birthday"  value="{$list.birthday}" placeholder="请输入您的生日"/>
							</div>
							<div class="form-group-input">
								<label for="" class="form-label">身份证号：</label>
								<input type="text" name="idnumber"  value="{$list.idnumber}" placeholder="请输入您的身份证号"/>
							</div>
							<div class="form-group-input">
								<label for="" class="form-label">手机号码：<span id="phoneerror" style="color: red;"></span></label>
								<input type="text" name="phone"  value="{$list.phone}" placeholder="请输入您的手机号"/>
							</div>
							<div class="form-group-input">
								<label for="" class="form-label">固定电话：</label>
								<input type="text" name="telephone"  value="{$list.telephone}" placeholder="请输入您的固话号"/>
							</div>
							{if $list.status!=$b}
							<div class="form-group-input">
								<label for="" class="form-label"><span>※</span>邮箱地址：<span id="emailerror" style="color: red;"></span></label>
								<input type="text" name="email"  value="{$list.email}" placeholder="请输入您的邮箱号"/>
							</div>
							{else}
							<div class="form-group-input">
								<label for="" class="form-label"><span>※</span>邮箱地址</label>
								{$list.email}
							</div>
							{/if}
							<div class="form-group-input">
								<label for="" class="form-label">通讯地址：</label>
								<input type="text" name="address"  value="{$list.address}" placeholder="请输入您的通讯地址"/>
							</div>
							<div class="form-group-input">
								<label for="" class="form-label">原头像:</label>
								<img src="{$list.head}"  width="100" height="100" />
							</div>
							<div class="form-group-input">
								<label for="" class="form-label">上传头像：</label>
			                    <input type="hidden" id="x1" name="x1" autocomplete="off" />
			                    <input type="hidden" id="y1" name="y1" autocomplete="off"/>
			                    <input type="hidden" id="x2" name="x2" autocomplete="off" />
			                    <input type="hidden" id="y2" name="y2" autocomplete="off" />
			                    <input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" />
			                    <div class="error" style="color:#a00;">注意：提交前，先截图</div>
			                    <div class="step2" style="width:600px;border: 1px solid #ccc;overflow:hidden;">
			                        <img id="preview" />
			                        <div class="info" style="display:none;">
			                            <ul>
			                                <li><label>文件大小</label> <input type="text" id="filesize" name="filesize" class="input" autocomplete="off" /></li>
			                                <li><label>类型</label> <input type="text" id="filetype" name="filetype" class="input" autocomplete="off"/></li>
			                                <li><label>图像尺寸</label> <input type="text" id="filedim" name="filedim" class="input" autocomplete="off"/></li>
			                                <li><label>宽度</label> <input type="text" id="w" name="w" class="input" autocomplete="off"/></li>
			                                <li><label>高度</label> <input type="text" id="h" name="h" class="input" autocomplete="off"/></li>
			                            </ul>
			                        </div>
			                    </div>
							</div>
							<div class="form-group-input form-button">
								<button type="submit">
								{if $list['status']!=$b}
								下一步
								{else/}
								继续完善
								{/if}
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<!--个人资料结束-->

<script type="text/javascript" src="/front/js/jquery.js"></script>
<script type="text/javascript">
    	$(function(){
    		//真实姓名
    		$("input[name='real_name']").blur(function(){
    			var real_name = $('input[name="real_name"]').val();
    			//不能为空
    			if(!$.trim(real_name)) {
					$("input[name='real_name']").css({border: "1px solid red"});
					$("#nameerror").html("必填");
					return false;
    			}else{
    				$("input[name='real_name']").css({border: "1px solid green"});
					$("#nameerror").html("");
    			}
    		})
    		//邮箱
    		$("input[name='email']").blur(function(){
    			var email = $('input[name="email"]').val();
    			//不能为空
    			if(!$.trim(email)) {
					$("input[name='email']").css({border: "1px solid red"});
					$("#emailerror").html("必填");
					return false;
    			}else{
    				$.get('/userinfo/checkemail?email='+$("input[name='email']").val(),function(data) {
						$("input[name='email']").css({border: "1px solid green"});
						$("#emailerror").html("");
						if (data===0) {
							$("input[name='email']").css({border: "1px solid red"});
							$("#emailerror").html("格式不正确");
						}
					});
    			}
    		})
    		//手机格式
    		$("input[name='phone']").blur(function(){
    			var phone = $('input[name="phone"]').val();
    			//手机号格式是否满足
    			if((/^1[3|4|5|7|8]\d{9}$/.test(phone)) || (/(^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$)|(^$)/.test(phone))){
					$("input[name='phone']").css({border: ""});
					$("#phoneerror").html("");
    			}else {
					$("input[name='phone']").css({border: "1px solid red"});
					$("#phoneerror").html("格式不正确");
					return false;
    			}
    		})

    	})
</script>
<!-- 头像裁剪上传 -->
<script src="/front/js/jquery.Jcrop.min.js"></script>
<script>
	/**
	 *
	 * HTML5 Image uploader with Jcrop
	 *
	 * Licensed under the MIT license.
	 * http://www.opensource.org/licenses/mit-license.php
	 * 
	 * Copyright 2012, Script Tutorials
	 * http://www.script-tutorials.com/
	 */
	//倍数
	//var multiple = 
	//alert(oImage.naturalWidth);
	// convert bytes into friendly format
	function bytesToSize(bytes) {
	    var sizes = ['Bytes', 'KB', 'MB'];
	    if (bytes == 0)
	        return 'n/a';
	    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
	    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
	}

	// check for selected crop region
	function checkForm() {
	    if (parseInt($('#w').val()))
	        return true;
	    $('.error').html('请先选择图片，并且截图').show();
	    return false;
	}

	// update info by cropping (onChange and onSelect events handler)
	function updateInfo(e) {
	    $('#x1').val(e.x);
	    $('#y1').val(e.y);
	    $('#x2').val(e.x2);
	    $('#y2').val(e.y2);
	    $('#w').val(e.w);
	    $('#h').val(e.h);
	}
	;

	// clear info by cropping (onRelease event handler)
	function clearInfo() {
	    $('.info #w').val('');
	    $('.info #h').val('');
	}

	function fileSelectHandler() {

	    // get selected file
	    var oFile = $('#image_file')[0].files[0];

	    // hide all errors
	    $('.error').hide();

	    // check for image type (jpg and png are allowed)
	    var rFilter = /^(image\/jpeg|image\/png|image\/jpg)$/i;
	    if (!rFilter.test(oFile.type)) {
	        $('.error').html('请选择jpg、jpeg或png格式的图片').show();
	        return;
	    }

	    // check for file size
	    if (oFile.size > 1000 * 1024) {
	        $('.error').html('请上传小于1M的图片').show();
	        return;
	    }

	    // preview element
	    var oImage = document.getElementById('preview');

	    // prepare HTML5 FileReader
	    var oReader = new FileReader();
	    oReader.onload = function(e) {

	        // e.target.result contains the DataURL which we can use as a source of the image
	        oImage.src = e.target.result;
	        oImage.onload = function() { // onload event handler

	            // display step 2
	            $('.step2').fadeIn(500);

	            // display some basic image info
	            var sResultFileSize = bytesToSize(oFile.size);
	            $('#filesize').val(sResultFileSize);
	            $('#filetype').val(oFile.type);
	            $('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);
	            //倍数
	            //var s = oImage.naturalWidth/200;
	            //alert(s);
	            //alert(oImage.naturalWidth);
	            // Create variables (in this scope) to hold the Jcrop API and image size
	            var jcrop_api, boundx, boundy;

	            // destroy Jcrop if it is existed
	            if (typeof jcrop_api != 'undefined')
	                jcrop_api.destroy();

	            // initialize Jcrop
	            $('#preview').Jcrop({
	                minSize: [32, 32], // min crop size
	                aspectRatio: 1, // keep aspect ratio 1:1
	                bgFade: true, // use fade effect
	                bgOpacity: .3, // fade opacity
	                onChange: updateInfo,
	                onSelect: updateInfo,
	                onRelease: clearInfo
	            }, function() {

	                // use the Jcrop API to get the real image size
	                var bounds = this.getBounds();
	                boundx = bounds[0];
	                boundy = bounds[1];

	                // Store the Jcrop API in the jcrop_api variable
	                jcrop_api = this;
	            });
	        };
	    };

	    // read selected file as DataURL
	    oReader.readAsDataURL(oFile);
	}
</script>